<template>
	<view>
		<view class="top">
			<view style="height: 88rpx;"></view>
			<view class="top_b" style="display: flex;">
				<image class="img_40 mr_146" @click="go_back()" src="../../static/imgs/1111/left.png" mode=""></image>
				<view class="top_ba" v-for="(item,index) in title" @click="dianji(item.value)"
					:class="active == item.value?'top_bb':'top_ba'">
					<view>{{item.name}}</view>
					<view class="xian"></view>
				</view>
			</view>
			<view class="top_c">
				<view class="cl_999CA3 f_28 mr_40" @click="dianji2(index)" v-for="(item,index) in data"
					:class="Ractive == index?'cl_3377FF f_32 mr_40':'cl_999CA3 f_28 mr_40'">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="back" v-for="(item,index) in list">
				<view class="list_a pb_12">
					<view class="flex">
						<view class="cl_fff f_20 fw_bold but_g" v-if="item.status==1">已认领</view>
						<view class="cl_fff f_20 fw_bold but_o" v-if="item.status==0">未认领</view>
						<view class="cl_00091A f_32 fw_bold">{{item.title}}</view>
					</view>
					<view class="cl_CCCED1 f_24">2小时前</view>
				</view>
				<view class="cl_333A47 f_28 mb_24">
					{{item.des_content}}
				</view>
				<view v-if="item.img_image.join(',')">
					<image class="img_480" mode="widthFix" :src="ite"  v-for="(ite,ind) in item.img_image"></image>
				</view>
				<view class="dasahng" v-if="item.status==1&&active==2" @click="show = true,id=item.id">
					打赏
				</view>
				<view class="dasahng" v-if="item.status==0&&active==2" @click="shows = true,id=item.id">
				    点击认领
				</view>
			</view>
		<!-- 	<view class="back">
				<view class="list_a pb_12">
					<view class="flex">
						<view class="cl_fff f_20 fw_bold but_o">未认领</view>
						<view class="cl_00091A f_32 fw_bold">失物招领失物招领</view>
					</view>
					<view class="cl_CCCED1 f_24">2小时前</view>
				</view>
				<view class="cl_333A47 f_28 mb_24">
					捡到丢失的手表，请失主联系我请失主联系我。捡到丢失的手表，请失主联系我请失主联系我
				</view>
				<view>
					<image class="img_480" src="../../static/imgs/sb.png" mode=""></image>
				</view>
				<view class="dasahng" v-if="active == 1" @click="show = true">
					打赏
				</view>
			</view> -->
		</view>
		<!-- <image class="nameImg" src="../../static/imgs/xian.png" mode=""></image> -->
		<u-popup :show="show" :round="10" mode="center" @close="close" @open="open">
			<view class="tc">
				<view class="cl_00091A f_32 boldTtf mb_48">打赏</view>
				<view>
					<view class="f_28 cl_666B75 mb_8">打赏金额</view>
					<view class="tc_input">
						<u--input placeholder="请输入内容" border="none" v-model="value" @change="change"></u--input>
					</view>
				</view>
				<view class="flex">
					<view class="anniu" @click="close()">取消</view>
					<view class="anniu1" >确定</view>
				</view>
			</view>
		</u-popup>
		<u-modal :show="shows" :title="titles"  :showCancelButton="showCancelButtons" @confirm="confirms" @cancel="cancels" @close="cancels"></u-modal>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titles:'是否确认领取?',
				// content:'是否确认领取?',
				showCancelButtons:true,
				title: [{
					name: "失物招领",
					value:1,
				}, {
					name: "找回失物",
					value:2,
				}],
				active: 1,
				data: [{
					name: "全部"
				}, {
					name: "已认领"
				}, {
					name: "未认领"
				}],
				Ractive: 0,
				show: false,
				shows: false,
				value: '',
				page: 1,
				pagesize: 10,
				list:[],
				id:0,
				status:'nomore',
			};
		},
		onLoad() {
			
			this.lists(1)
		},
		onReachBottom() {
		
		  if (this.page * this.pagesize > this.list.length) return;
		  this.status = "loading";
		  this.page = ++this.page;
		  setTimeout(() => {
		    this.lists(2);
		    if (this.page * this.pagesize > this.list.length)
		      this.status = "nomore";
		    else this.status = "loading";
		  }, 1000);
		},
		methods: {
			dianji(index) {
				this.page=1
				this.active = index
				this.lists(1)
			},
			dianji2(index) {
				this.page=1
				this.Ractive = index
				this.lists(1)
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				// console.log('close');
			},
			change(e) {
				console.log('change', e);
			},
			go_back(){
				uni.navigateBack(1)
			},
			confirms(){
				this.$.ajax(1, "POST", "users/lost_and_found_collection", {
					id: this.id,
				}, (res) => {
					if(res.code==200){
						this.$.ti_shi(res.msg)
						this.shows=false
						setTimeout(() => {
						    this.lists(1)
						}, 1000);
					}else{
						this.$.ti_shi(res.msg)
					}
				})
			},
			cancels(){
				this.shows=false
			},
			lists(i) {
				this.$.ajax(1, "POST", "users/my_posts", {
					type: this.active,
					status: this.Ractive,
					page: this.page,
					pagesize: this.pagesize
				}, (res) => {
					if(i==1){
						this.list=res.data
					}else{
						 this.list = [...this.list, ...res.data];
					}
				})
			},
		}
	};
</script>

<style lang="scss">
	page {
		background-color: #F7FAFF;
	}

	.top {
		width: 686rpx;
		height: 252rpx;
		background: #F7FAFF;
		position: fixed;
		top: 0;
		left: 0;
		padding: 0 32rpx;
		z-index: 9999;

		.top_b {
			height: 88rpx;
			display: flex;
			align-items: center;

			.top_ba {
				margin-right: 72rpx;
				font-weight: 500;
				font-size: 28rpx;
				color: #999CA3;
				display: flex;
				flex-direction: column;
				align-items: center;

				.xian {
					width: 40rpx;
					height: 6rpx;
					background: #fff;
					border-radius: 3rpx 3rpx 3rpx 3rpx;
				}
			}

			.top_bb {
				margin-right: 72rpx;
				font-weight: bold;
				font-size: 32rpx;
				color: #111111;
				display: flex;
				flex-direction: column;
				align-items: center;

				.xian {
					width: 40rpx;
					height: 6rpx;
					background: #3377FF;
					border-radius: 3rpx 3rpx 3rpx 3rpx;
				}
			}
		}
	}

	.top_c {
		display: flex;
		align-items: center;
		height: 76rpx;
	}

	.bottom {
		margin-top: 276rpx;
		// min-height: 60vh;
	}

	.back {
		width: 638rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(51, 119, 255, 0.05);
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		padding: 24rpx;
		margin-left: 32rpx;
		margin-bottom: 24rpx;
	}

	.list_a {
		display: flex;
		justify-content: space-between;
	}

	.but_g {
		width: 76rpx;
		height: 44rpx;
		background: #5CE500;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		text-align: center;
		line-height: 44rpx;
		margin-right: 16rpx;
	}

	.but_o {
		width: 76rpx;
		height: 44rpx;
		background: #FF6401;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		text-align: center;
		line-height: 44rpx;
		margin-right: 16rpx;
	}

	.nameImg {
		width: 750rpx;
		height: 40rpx;
		margin-top: 48rpx;
	}

	.dasahng {
		width: 638rpx;
		height: 76rpx;
		background: #3377FF;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		font-weight: 500;
		font-size: 28rpx;
		color: #FFFFFF;
		text-align: center;
		line-height: 76rpx;
		margin-top: 24rpx;
	}

	.tc {
		padding: 32rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tc_input {
		width: 574rpx;
		padding: 24rpx;
		background: #F7F7F7;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin-bottom: 64rpx;
	}
	.anniu{
		width: 298rpx;
		height: 100rpx;
		background: #F7F7F7;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		text-align: center;
		line-height: 100rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #333A47;
		margin-right: 24rpx;
	}
	.anniu1{
		width: 298rpx;
		height: 100rpx;
		background: #3377FF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		text-align: center;
		line-height: 100rpx;
		font-weight: bold;
		font-size: 32rpx;
		color: #FFFFFF;
	}
</style>